import React, { Component,Fragment} from 'react'
// antd
import {Form,Input,Button,Table,message,Modal,Select,Checkbox,Pagination,Row,Col} from "antd"
import queryList, {addSailorPhoto,DeleteSailor,getSailor,getSailorNumber} from "../../api/sailor";
import { PlusOutlined,EditOutlined,DeleteOutlined,DownloadOutlined,PlaySquareOutlined,SearchOutlined,FileAddOutlined  } from '@ant-design/icons';
import {createFormData} from "../../utils/creatFormData"
import Avatar from "./Avatar";
import PubSub from "pubsub-js";

export default class Sailor extends Component {
    state = {
        total:0,
        limit:10,
        offset:0,
        visible_del:false,
        visible_addPhoto: false,
        columns:[
            {title: "编号",dataIndex:"id",key:"id"},
            {title: "姓名",dataIndex:"chinese_name",key:"chinese_name"},
            {title: "名字缩写",dataIndex:"english_name",key:"english_name"},
            {title: "电话号码",dataIndex:"phone_number",key:"phone_number"},
            {title: "职位",dataIndex:"position",key:"position"},
            {
                title: "操作",
                dataIndex:"operation",
                key:"operation", 
                width:240,
                render: (text, rowData) => {
                    return (
                        <div className="inline-button">
                            <Button type="primary" onClick={()=> this.onHandeAddPhoto(rowData)} icon={<FileAddOutlined />}>添加图片</Button>
                            <Button onClick={() => this.onHanleDelete(rowData)}icon={<DeleteOutlined />}>删除</Button>
                        </div>
                    )
                }
            },
        ],
        data:[]
    }
    onHanleDelete=(sailor)=>{
        this.setState({
            visible_del:true,
            name:sailor.chinese_name,
            id:sailor.id,
        })
    }
    onHandeAddPhoto=(sailor)=>{
        this.setState({
            visible_addPhoto:true,
            name:sailor.chinese_name,
            id:sailor.id,
        })
    }

    componentDidMount(){
        this.loadData()
        this.token=PubSub.subscribe("Img",(msg,data)=> {
            // 订阅的频道一发布消息，就调用此回调函数
            this.img=data
            this.setState(data)
            // console.log(this.imgURL)
            // console.log(msg,data)
        })
        this.totalSailorNumber()
    }

    componentWillUnmount(){
        PubSub.unsubscribe(this.token)
    }

    loadData=()=>{
        const requestData = {
            limit: this.state.limit,
            offset: this.state.offset
        }
        queryList(requestData).then(response => {
            console.log(response.data)
            if(response.data){
                this.setState({
                    data:response.data
                })
            }
        }).then(error => {
            console.log(error)
        })
        this.totalSailorNumber()
    }

    totalSailorNumber=()=>{
        getSailorNumber().then(response =>{
            // console.log(response.data)
            this.setState({
                total:response.data
            })
        }).catch(error=>{
            console.log(error);
        })
    }
    
    handleDelSailor=()=>{
        const {name : sailorname} = this.state
        DeleteSailor(sailorname).then(response => {
            const mess = "删除成功"
            // console.log(response.data)
            message.info(mess)
            this.setState({
                visible_del:false,
                name:"",
                id:""
            })
            //请求数据
            this.loadData()
            this.totalSailorNumber()
        })
    }

    handleSailorAddPhoto=()=>{
        let sailorData={}
        sailorData.file=this.img
        sailorData.sailor_id=this.state.id
        // console.log(sailorData.id)
        // console.log(typeof sailorData.id)
        if(this.img){
            addSailorPhoto(createFormData(sailorData)).then(response => {
                this.setState({
                    visible_addPhoto:false,
                    name:"",
                    id:""
                })
                //请求数据
                this.loadData()
            }).catch(error => {
                console.log(error)
                alert("上传图片失败")
            })
        }
        else{
            alert("您还未上传图片");
        }
    }
    onFinish=(value)=>{
        let {sailorname}=value
        if(sailorname){
            getSailor(sailorname).then(response =>{
                const dataList = []

                const responseData = response.data

                // console.log(response.data)

                dataList.push(responseData)
                // // console.log(dataList)
                // // console.log(responseData)
                // let maps = new Map([[true,'有效'],[false,'无效']]);
                // dataList.map( obj => {
                //     obj.is_active = maps.get(obj.is_active)
                // })
                if(dataList){
                    this.setState({
                        data:dataList,
                        total:dataList.length
                    })
                }
            }).catch( error =>{
                console.log(error)
                this.setState({
                    data:[]
                })
            })
        }else{
            this.loadData();
        }
    }

    onChangeCurrentPage = (value) => {
        // console.log(value)
        const {limit} =this.state
        this.setState({
            offset:limit*(value-1),
        },()=>{
            // console.log(this.state.offset)
            this.loadData();
        })           
    }

    onChangeSizePage = (value,page) => {
        this.setState({
           offset: 0,
           limit: page,
        }, () => {
            this.loadData()
        })
    }
    
    render() {
        const {columns,data} = this.state
        return (
            <div>
               <div className="uuuu">                   
                    <div className="tttt">
                <Form layout="inline" onFinish={this.onFinish}>
                    <Form.Item label="船员中文名" name="sailorname">
                        <Input placeholder="请输入船员中文名" />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
                            搜索
                        </Button>
                    </Form.Item>
                </Form>
                </div>
                </div>
                <Fragment >
                <div className="table-row">
                    <Table 
                    className="table-wrap"
                    //  pagination={{pageSize:10}}
                    
                    pagination={false}
                    // rowSelection={rowSelection} 
                    rowKey="chinese_name" 
                    columns={columns} 
                    dataSource={data} 
                    bordered>
                     </Table>
                    <hr color={'#f5f5f5'}/>
                    <Row  style={{marginTop:8,marginRight:5}}>
                    <Col span={8}></Col>
                        <Col span={16}>
                            <Pagination 
                                onChange={this.onChangeCurrentPage}
                                onShowSizeChange={this.onChangeSizePage}
                                pageSize={this.state.limit}
                                className="pull-right"
                                defaultCurrent={1}
                                showSizeChanger
                                showQuickJumper
                                total={this.state.total} 
                                showTotal={total => `总计 ${total} 条` }
                            />
                        </Col>
                    </Row>  
                    </div>             
                </Fragment>
                 {/*删除弹窗*/}
                <Modal
                    title="提示"
                    visible={this.state.visible_del}
                    onOk={this.handleDelSailor}
                    onCancel={() => {this.setState({visible_del:false})}}
                    okText="确认"
                    cancelText="取消"
                >
                    <p className="text-center">确认删除此信息？<strong className="color-red">删除后将无法恢复。</strong></p>
                </Modal>

                {/* 添加图片弹窗 */}
                <Modal title={`给用户${this.state.name}添加一张图片`}
                       visible={this.state.visible_addPhoto}   //设置默认隐藏
                       onOk={this.handleSailorAddPhoto}
                       onCancel={() => {this.setState({visible_addPhoto:false})}}
                       okText="确认"
                       cancelText="取消"
                >
                    <center><Avatar /></center>
                </Modal>

            </div>
        )
    }
}